<template>
	<view>
		<view class="top-list">
			<view class="nav-list u-flex u-col-center u-row-between">
				<view class="item" :class="{ on: navIndex == index }" v-for="(item, index) in navList" :key="index" @click="changeNav(item, index)">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="" style="height: 80rpx"></view>
		<view class="contetn">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="item_1 flex_jc_sb">
					<view class="flex">
						<image :src="item.avatar" mode="" v-if="item.avatar"></image>
						<image src="/static/image@2x.png" mode="aspectFill" v-else></image>
						<view class="">{{ item.nickname }}</view>
						
						<view class="tip" v-if="item.maxPrice">最高价</view>
						<view class="tip" v-if="item.see == 0">最新价</view>
					</view>
					<view v-if="item.cancel == 0 && item.reject == 0 && item.status == 1" class="sp" style="color: #54bd6a">有效</view>
					<view v-if="item.cancel != 0 || item.reject != 0 || item.status == 0" class="sp" style="color: #979797">失效</view>
				</view>
				<view class="item_2">
					<view class="t1">服务器：{{ item.gameZoneName }}</view>
				</view>
				<view class="item_2" @click="openPop(item)">
					<view class="t1">游戏ID:*** | 买家联系:***</view>
					<view class="t2">点击此处查看详细信息>></view>
				</view>
				<view class="item_3 flex_jc_sb">
					<view class="" style="display: flex; align-items: flex-end">
						<view class="time">{{ item.createTime | formatISODate }}</view>
						<view class="time">
							<view class="price">
								<text class="y">出价：</text>
								<text
									class="p"
									:class="{
										p1: getPriceLength(item.price) < 6,
										p2: getPriceLength(item.price) == 6,
										p3: getPriceLength(item.price) == 7,
										p4: getPriceLength(item.price) == 8,
										p5: getPriceLength(item.price) >= 9
									}"
								>
									{{ $numToLocaleString(item.price) }}
								</text>
								<text class="y">{{ item.priceUnit == 0 ? 'MHB' : '元' }}</text>
							</view>
						</view>
					</view>
					<view v-if="item.cancel == 0 && item.reject == 0 && item.status == 1" class="btn" @click="handleJUJUE(item)">拒绝</view>
				</view>
			</view>
			<view class="nolist" v-if="nolist">
				<image src="/static/kong2.png" mode="aspectFill"></image>
				<view class="p">暂无信息</view>
			</view>
		</view>
		<uni-popup ref="popup2" type="bottom" :safe-area="false">
			<view class="pop-footer">
				<uni-icons type="closeempty" size="22" color="#AEAEAE" class="icons" @click="close(2)"></uni-icons>
				<view class="f-title">查看信息</view>
				<view class="f-list">
					<view class="item item1 u-flex u-col-center u-row-between" @click="seePay" v-if="wxpay == 1">
						<image src="@/static/order12.png" mode="aspectFill" class="bg"></image>
						<view class="img">
							<image src="@/static/order11.png" mode="aspectFill"></image>
						</view>
						<view class="con" style="color: #b44b00">支付{{ wxprice }}商人币立即获得1次查看次数</view>
					</view>
					<view class="item item2 u-flex u-col-center u-row-between" @click="seeAd" v-if="wxquery == 1">
						<image src="@/static/order22.png" mode="aspectFill" class="bg2"></image>
						<view class="img">
							<image src="@/static/order21.png" mode="aspectFill"></image>
						</view>
						<view class="con" style="color: #003b9d">查看广告，免费获取查看次数</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup3" type="center">
			<view class="pop-data">
				<view class="data-img">
					<image :src="data.quotationImage" mode="aspectFill" v-if="data.quotationImage"></image>
					<image :src="webconfigImg" mode="aspectFill" v-else></image>
				</view>
				<view class="data-con">
					<view class="title u-line-2">
						{{ data.quotationName }}
					</view>
					<view class="flex_jc_sb">
						<view class="price">
							<text class="y">最高出价：</text>
							<text
								class="p"
								:class="{
									p1: getPriceLength(price) < 6,
									p2: getPriceLength(price) == 6,
									p3: getPriceLength(price) == 7,
									p4: getPriceLength(price) == 8,
									p5: getPriceLength(price) >= 9
								}"
							>
								{{ $numToLocaleString(price) }}
							</text>
							<text class="y">{{ data.priceUnit == 0 ? 'MHB' : '元' }}</text>
						</view>
						<view class="xbtn flex_jc_cent" @click="goJubao">
							<image src="/static/xxx.png" mode=""></image>
							举报
						</view>
					</view>
					<view class="info">
						{{ data.gameZoneName }}
					</view>
					<view class="info2">
						<view class="p">
							ID：{{ data.account }}
							<text @click="$copyFun(data.account)">复制</text>
						</view>
						<view class="p flex">
							<image src="/static/wx.png" mode=""></image>
							{{ data.wechat }}
							<text @click="$copyFun(data.wechat)">复制</text>
						</view>
						<view class="p flex">
							<image src="/static/sj.png" mode=""></image>
							{{ data.phone }}
							<text @click="$copyFun(data.phone)">复制</text>
						</view>
					</view>
				</view>
				<view v-if="data.cancel == 0 && data.reject == 0 && data.status == 1 && data.priceUnit == 1" class="btn" @click="goCHUJIA()">卖出</view>
				<view class="close" @click="close(3)">
					<uni-icons size="34" type="close" color="#fff"></uni-icons>
				</view>
			</view>
		</uni-popup>

		<uni-popup type="bottom" ref="popup4" :animation="false" :safe-area="false">
			<view class="popup4">
				<view class="contetn">
					<uni-icons @click="close(4)" class="icon" size="24" type="closeempty"></uni-icons>
					<view class="title">温馨提示</view>
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
						<view class="textsSclow">
							<view class="" v-html="safeOrderRemark"></view>
						</view>
					</scroll-view>
					<view class="btntext" v-if="yesBottom">请向下滑动阅读</view>
					<view class="btntext active" v-else @click="gosign">我已联系到对方，可以开始交易</view>
				</view>
				<view class="imgs">
					<view class="btntexts" @click.self="close(4)">取消交易</view>
					<image src="@/static/btimg.png" mode=""></image>
				</view>
				<view class="bcgc"></view>
			</view>
		</uni-popup>
		<uni-popup type="center" ref="popup5" :animation="false" :safe-area="false">
			<view class="popup5">
				<view class="contetn">
					<uni-icons @click="close(5)" class="icon" size="24" type="closeempty"></uni-icons>
					<view class="title">温馨提示</view>
					<view class="ts" v-if="btntype == 1">对方正在交易中，暂不可交易</view>
					<view class="ts" v-if="btntype == 2">您当前有正在交易中的订单</view>
					<view class="btns_flex">
						<view class="b1" @click="close(5)">关闭</view>
						<view class="b2" v-if="btntype == 2" @click="gourl()">立即查看</view>
						<view v-if="btntype == 1" class="b2" @click="close(5)">我知道了</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { webconfig, quotationbuyerList, usersbuyerReject, usersbuyerInfo, createBuyer, beforeCreateBuyer, searchpay, getUserinfo } from '@/common/http.api.js';
export default {
	data() {
		return {
			webconfigImg: uni.getStorageSync('webconfig').productDefaultImage,
			navList: [
				{
					name: '全部',
					type: undefined
				},
				{
					name: '有效',
					type: 1
				},
				{
					name: '已失效',
					type: 0
				}
			],
			navIndex: 0,
			params: {
				id: undefined,
				page: 1,
				status: undefined //1有效 0无效
			},
			list: [],
			nolist: false,
			data: {},
			price: 0,

			buyerID: 0,
			btntype: 1,
			yesBottom: false,
			safeOrderRemark: '',

			wxpay: 1, //信息查询付费抖音 1开启 0关闭
			wxquery: 1, //信息查询广告抖音 1开启 0关闭
			wxprice: '', //信息查询费用抖音
			currentItemId: null, // 当前点击的item id
			viewedIds: [], // 当前页面已查看过的id数组
			rewardedVideoAd: null // 激励视频广告实例 - 语义化命名
		};
	},
	computed: {
		getPriceLength() {
			return (data) => {
				if (!data) return 1;
				function getDigitCount(num) {
					if (num === 0) return 1;

					num = Math.abs(parseInt(num)); // 忽略小数部分，只处理整数
					return Math.floor(Math.log10(num)) + 1;
				}
				let l = getDigitCount(data);
				return l;
			};
		}
	},
	onLoad(option) {
		this.params.id = option.id;
		this.getlist();
		this.getUser();
		this.getwebconfig();
	},
	onReachBottom() {
		this.params.page++;
		this.getlist();
	},
	onUnload() {
		// 页面卸载时清空已查看记录
		this.viewedIds = [];
		this.currentItemId = null;
		this.cleanupRewardedVideoAd();
	},
	methods: {
		lower() {
			this.yesBottom = false;
		},
		getwebconfig() {
			webconfig({}).then((res) => {
				if (res.code == 200) {
					this.safeOrderRemark = res.data.safeOrderRemark;
					this.wxpay = res.data.wxpay;
					this.wxquery = res.data.wxquery;
					this.wxprice = res.data.wxprice;
				}
			});
		},
		goJubao() {
			uni.navigateTo({
				url: `/pages/user/complaint?id=${this.currentItemId}&&type=2`
			});
			this.close(3);
		},
		openPop(item) {
			this.currentItemId = item.id; // 记录当前点击的item id
			if (this.wxpay == 1 || this.wxquery == 1) {
				// 检查当前页面是否已经查看过这个id
				if (this.viewedIds.includes(item.id)) {
					// 已查看过，直接显示信息
					this.getData(item.id);
				} else {
					// 未查看过，弹出选择框
					this.$refs.popup2.open();
				}
			} else {
				this.getData(item.id);
			}
		},

		// 标记为已查看
		markAsViewed() {
			if (this.currentItemId && !this.viewedIds.includes(this.currentItemId)) {
				this.viewedIds.push(this.currentItemId);
			}
		},

		// 打开查看
		getData(id) {
			usersbuyerInfo(id).then((res) => {
				if (res.code == 200) {
					this.data = res.data.buyer;
					this.price = res.data.price;
					this.$refs.popup3.open();
				}
			});
		},

		getUser() {
			getUserinfo({}).then((res) => {
				if (res.code == 200) {
					this.userInfo = res.data;
				}
			});
		},

		seePay() {
			if (this.userInfo.coin < this.wxprice) {
				this.$modal.msg('商人币不足');
				return;
			}
			uni.showModal({
				title: '温馨提示',
				content: `确认支付${this.wxprice}商人币查看信息`,
				success: (res) => {
					if (res.confirm) {
						searchpay({
							id: this.currentItemId,
							paytype: 1
						}).then((res) => {
							if (res.code == 200) {
								this.$modal.msg('支付成功');
								this.markAsViewed(); // 标记为已查看
								this.getData(this.currentItemId);
								this.close(2);
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},

		// 清理激励视频广告实例
		cleanupRewardedVideoAd() {
			if (this.rewardedVideoAd) {
				this.rewardedVideoAd.offClose();
				this.rewardedVideoAd.offError();
				this.rewardedVideoAd.destroy();
				this.rewardedVideoAd = null;
			}
		},

		seeAd() {
			uni.showLoading({
				title: '加载中...'
			});
			// #ifdef MP-TOUTIAO
			// 先销毁已存在的广告实例，避免重复绑定
			this.cleanupRewardedVideoAd();

			// 创建新的激励视频广告实例
			this.rewardedVideoAd = tt.createRewardedVideoAd({
				adUnitId: 'qnyjogx75a7vfoogil'
			});
			// 监听错误
			this.rewardedVideoAd.onError((err) => {
				uni.hideLoading();
				uni.showToast({
					title: `广告错误: ${err.errCode}`,
					icon: 'none'
				});
			});
			// 定义关闭事件处理函数
			const closeHandler = (data) => {
				// 先移除事件监听，避免重复执行
				this.rewardedVideoAd.offClose(closeHandler);
				uni.hideLoading();
				if (data.isEnded) {
					this.$modal.msg('观看完成');
					this.markAsViewed(); // 标记为已查看
					this.getData(this.currentItemId);
					this.close(2);
				} else {
					this.$modal.msg('未观看完视频');
				}
				// 完成后销毁实例
				this.cleanupRewardedVideoAd();
			};
			// 绑定关闭事件
			this.rewardedVideoAd.onClose(closeHandler);
			// 加载并显示广告
			this.rewardedVideoAd
				.load()
				.then(() => {
					this.rewardedVideoAd.show().catch((err) => {
						console.error('广告显示失败', err);
						uni.hideLoading();
						this.$modal.msg('广告加载失败，请重试');
					});
				})
				.catch((err) => {
					console.error('广告加载失败', err);
					uni.hideLoading();
					this.$modal.msg('广告加载失败，请重试');
				});
			// #endif
		},

		getlist() {
			quotationbuyerList(this.params).then((res) => {
				if (res.code == 200) {
					this.list.push(...res.data.list);
					this.nolist = this.list.length == 0;
				}
			});
		},
		changeNav(item, index) {
			if (this.navIndex != index) {
				this.navIndex = index;
				this.params.status = item.type;
				this.params.page = 1;
				this.list = [];
				this.getlist();
			}
		},
		// 撤销出价
		handleJUJUE(item) {
			this.$modal
				.confirm('是否要拒绝当前出价？', '拒绝提示')
				.then(() => {
					return usersbuyerReject(item.id);
				})
				.then(() => {
					this.$modal.msgSuccess('拒绝成功');
					this.list = [];
					this.params.page = 1;
					this.getlist();
				})
				.catch(() => {});
		},
		close(type) {
			this.$refs['popup' + type].close();
		},
		// 卖出
		goCHUJIA() {
			beforeCreateBuyer({ id: this.currentItemId }).then((res) => {
				if (res.code == 200) {
					this.close(3);
					if (res.data.status) {
						if (res.data.type == 0) {
							this.btntype = 1;
							this.$refs.popup5.open();
						} else {
							this.urlID = res.data.id;
							this.btntype = 2;
							this.$refs.popup5.open();
						}
					} else {
						this.yesBottom = true;
						this.$refs.popup4.open();
					}
				}
			});
		},
		gosign() {
			createBuyer({ id: this.currentItemId }).then((res) => {
				if (res.code == 200) {
					uni.navigateTo({
						url: `/pages/index/newpage/tradinfo?id=${res.data.id}`
					});
					this.close(4);
					this.close(3);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.nolist {
	padding: 100rpx 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	image {
		width: 160rpx;
		height: 136rpx;
	}

	.p {
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
	}
}
.nomore {
}
.top-list {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	z-index: 99;
	.nav-list {
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		.item {
			flex: 1;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			color: #8e8e8e;
			font-size: 28rpx;
		}
		.on {
			color: #ff6f07;
			position: relative;
			font-weight: 500;
			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				width: 60rpx;
				height: 4rpx;
				background: #ff6f07;
				border-radius: 4rpx;
				margin-left: -30rpx;
			}
		}
	}
}
.contetn {
	margin-top: 20rpx;
	.item {
		width: 710rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 30rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		.item_1 {
			margin-bottom: 20rpx;
			image {
				width: 40rpx;
				height: 40rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #11192d;
			.sp {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #54bd6a;
			}
			.tip {
				height: 28rpx;
				background: #fe1515;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #ffffff;
				text-align: center;
				line-height: 28rpx;
				margin-left: 20rpx;
				padding:0rpx 10rpx;
			}
		}
		.item_2 {
			width: 670rpx;
			background: #f9f9f9;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-top: 8rpx;
			padding: 8rpx 12rpx;
			box-sizing: border-box;
			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #979797;
			}
			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #ff6f07;
				margin-top: 8rpx;
			}
		}
		.item_3 {
			margin-top: 14rpx;
			.time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #979797;
				margin-right: 20rpx;
				.price {
					.p {
						font-family: 'DIN';
						font-weight: bold;
						font-size: 28rpx;
						text-align: left;
					}

					.p5 {
						color: #ff70a4;
					}

					.p4 {
						color: #840ffb;
					}

					.p3 {
						color: #fe1515;
					}

					.p2 {
						color: #1ec742;
					}

					.p1 {
						color: #11192d;
					}

					.y {
						color: #979797;
						font-size: 20rpx;
						margin-left: 10rpx;
						font-weight: 400;
					}
				}
			}
			
			.btn {
				width: 120rpx;
				height: 52rpx;
				background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #ffffff;
				text-align: center;
				line-height: 52rpx;
			}
		}
	}
}

.pop-data {
	padding: 20rpx;
	width: 620rpx;
	min-height: 620rpx;
	box-sizing: border-box;
	position: relative;
	background: #fff;
	border-radius: 30rpx;

	.close {
		position: absolute;
		bottom: -100rpx;
		left: 50%;
		margin-left: -30rpx;
		width: 60rpx;
		height: 60rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.data-img {
		width: 100%;
		height: 340rpx;
		overflow: hidden;
		border-radius: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.data-con {
		margin-top: 20rpx;

		.title {
			line-height: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #11192d;
			text-align: left;
		}
		.xbtn {
			width: 85rpx;
			height: 32rpx;
			background: #f9f9f9;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #979797;
			line-height: 32rpx;
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}
		}

		.price {
			height: 50rpx;
			line-height: 50rpx;

			.p {
				font-family: 'DIN';
				font-weight: bold;
				font-size: 36rpx;
				text-align: left;
			}

			.p5 {
				color: #ff70a4;
			}

			.p4 {
				color: #840ffb;
			}

			.p3 {
				color: #fe1515;
			}

			.p2 {
				color: #1ec742;
			}

			.p1 {
				color: #11192d;
			}

			.y {
				color: #979797;
				font-size: 20rpx;
				margin-left: 10rpx;
				font-weight: 400;
				height: 40rpx;
				line-height: 40rpx;
			}
		}

		.info {
			height: 40rpx;
			line-height: 40rpx;
			background: #f9f9f9;
			border-radius: 8rpx;
			padding: 0 10rpx;
			color: #979797;
			font-size: 20rpx;
			margin-top: 10rpx;

			text {
				margin-left: 20rpx;
				color: #ff6f07;
			}
		}

		.info2 {
			background: #f9f9f9;
			border-radius: 8rpx;
			padding: 0 10rpx;
			color: #979797;
			font-size: 20rpx;
			margin-top: 10rpx;

			.p {
				height: 40rpx;
				line-height: 40rpx;
			}
			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}
			text {
				margin-left: 20rpx;
				color: #ff6f07;
			}
		}
	}
	.btn {
		margin-top: 30rpx;
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
		background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
	}
}

.popup4 {
	.contetn {
		background-color: #fff;
		width: 690rpx;
		height: 1100rpx;
		position: fixed;
		bottom: 0;
		left: 30rpx;
		padding: 24rpx 50rpx;
		box-sizing: border-box;
		border-radius: 30rpx 30rpx 0rpx 0rpx;

		.icon {
			right: 24rpx;
			position: absolute;
		}

		.title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 34rpx;
			color: #333333;
			text-align: center;
			line-height: 50rpx;
			margin-top: 34rpx;
		}

		.textsSclow {
			height: 500rpx;
			// overflow: auto;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
			line-height: 54rpx;
			margin: 40rpx auto;
		}

		.btntext {
			height: 90rpx;
			background: #b6b6b6;
			border-radius: 6rpx;
			margin-top: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 90rpx;
			text-align: center;
		}

		.active {
			background: #f8883b;
			border-radius: 6rpx;
		}
	}

	.bcgc {
		width: 100%;
		height: 248rpx;
		background-color: #f88538;
	}

	.imgs {
		width: 100%;
		height: 248rpx;
		z-index: 9;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: center;

		.btntexts {
			margin-top: 10rpx;
			border-radius: 6rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			line-height: 90rpx;
			color: #ff6f07;
			position: absolute;
		}

		image {
			width: 100%;
			height: 248rpx;
			vertical-align: bottom;
		}
	}
}

.popup5 {
	margin-bottom: 200rpx;

	.contetn {
		background-color: #fff;
		width: 620rpx;
		padding: 24rpx 40rpx;
		box-sizing: border-box;
		border-radius: 20rpx;

		.icon {
			right: 24rpx;
			position: absolute;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
			text-align: center;
			margin-top: 30rpx;
		}

		.ts {
			margin: 50rpx auto 56rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			text-align: center;
		}

		.btns_flex {
			display: flex;
			justify-content: space-between;

			.b1 {
				width: 260rpx;
				height: 90rpx;
				background: #f9f9f9;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #d1cdcd;
				text-align: center;
				line-height: 90rpx;
			}

			.b2 {
				width: 260rpx;
				height: 90rpx;
				background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #ffffff;
				text-align: center;
				line-height: 90rpx;
			}
		}
	}
}
.pop-footer {
	padding: 40rpx 30rpx;
	background: #fff;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	border-radius: 50rpx 50rpx 0rpx 0rpx;
	min-height: 300rpx;

	.icons {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.f-title {
		height: 60rpx;
		line-height: 60rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
		text-align: center;
	}

	.f-list {
		margin-top: 40rpx;

		.item {
			margin-bottom: 30rpx;
			position: relative;
			height: 140rpx;
			border-radius: 20rpx;
			overflow: hidden;
			padding: 0 30rpx;

			.bg {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				width: 340rpx;
				height: 140rpx;
				z-index: 1;
				// filter: blur(100rpx);
			}

			.bg2 {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				width: 422rpx;
				height: 140rpx;
				z-index: 1;
				// filter: blur(100rpx);
			}

			.img {
				position: relative;
				z-index: 999;
				width: 68rpx;
				height: 68rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.con {
				flex: 1;
				width: 1rpx;
				margin-left: 30rpx;
				position: relative;
				z-index: 999;
				font-weight: 500;
				font-size: 32rpx;

				.n {
					height: 44rpx;
					line-height: 44rpx;

					text-align: left;
				}

				.m {
					line-height: 30rpx;
					height: 30rpx;
					font-size: 20rpx;
					text-align: left;
				}
			}
		}

		.item1 {
			background: linear-gradient(90deg, #fffaea 0%, #ffdea9 100%);

			.con {
				.n {
					color: #b44b00;
				}

				.m {
					color: #dfa021;
				}
			}
		}

		.item2 {
			background: linear-gradient(90deg, #eef8ff 0%, #73b0ff 100%);

			.con {
				.n {
					color: #003b9d;
				}

				.m {
					color: #3371c2;
				}
			}
		}
	}
}
</style>
